import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as elIcons from '@element-plus/icons-vue'
// import request from './utils/request'
// import axios from 'axios'
import storage from './utils/storage'
import store from './store'
import api from './api'

const app = createApp(App);

// console.log(import.meta.env);

// 自定义指令
app.directive('has', {
    // 第一个是dom元素，第二个是包含指令键值的对象。arg是键（参数）类似v-on:click="function" 的click，value是值 类似v-on:click="function" 的function
    // v-has:键="'值'"。 值如果传字符串必须再包一层单引号，否则就是一个变量

    // beforeMount。如果是 beforeMount 就无法操作dom（增删改），因为dom还在内存中，还没渲染到页面上
    mounted: function (el, binding) {
        // console.log(el, binding);
        // 获取按钮权限
        const actionList = storage.getItem('actionList')
        const value = binding.value
        // 查找权限列表中是否有对应的权限标识
        const hasPermission = actionList.includes(value)
        if (!hasPermission) {
            // 隐藏按钮
            el.style = 'display:none'
            // 删除按钮dom
            el.parentNode.removeChild(el)
            // setTimeout(() => el.parentNode.removeChild(el), 0) // 使用beforeMount时 ，使用宏任务形式，不是很了解，以后再看看
        }
    },
})


//全局配置
// app.provide('axios',axios) //使用provide，子孙组件都可以使用inject获取到
// app.config.globalProperties.$request = request; //使用getCurrentInstance可以取到
app.config.globalProperties.$storage = storage;
app.config.globalProperties.$api = api;
app.config.globalProperties.elIcons = elIcons;
app.use(ElementPlus, {
    size: 'small'
}).use(store).use(router).mount('#app')
